<template>
  <div class="searchcontetn">
    <van-tabs animated swipeable v-model:active="active">
      <van-tab title="综 合">
        <composited :keyword="keyword" @changeTab="changeTab" />
      </van-tab>
      <van-tab title="单 曲">
        <songs-search :keyword="keyword" />
      </van-tab>
      <van-tab title="歌 单">
        <playlist-search :keyword="keyword" />
      </van-tab>
      <van-tab title="专 辑">
        <album-search :keyword="keyword" />
      </van-tab>
      <van-tab title="歌 手">
        <artist-search :keyword="keyword" />
      </van-tab>
      <van-tab title="用 户">
        <user-search :keyword="keyword" />
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import Composited from './SearcConentComp/Composited.vue'
import SongsSearch from './SearcConentComp/SongsSearch.vue'
import AlbumSearch from './SearcConentComp/AlbumSearch.vue'
import PlaylistSearch from './SearcConentComp/PlaylistSearch.vue'
import ArtistSearch from './SearcConentComp/ArtistSearch.vue'
import UserSearch from './SearcConentComp/UserSearch.vue'
import { _getSearchdata } from '@/service/api/search.js'
export default {
  data() {
    return {
      keyword: this.$route.query.val,
      active: ''
    }
  },
  methods: {
    changeTab(i) {
      this.active = i
    }
  },
  components: {
    Composited,
    SongsSearch,
    AlbumSearch,
    PlaylistSearch,
    ArtistSearch,
    UserSearch
  },
  mounted() {
    this.$emit('backKeyw', this.keyword)
  }
}
</script>

<style lang="scss" scoped>
.searchcontetn {
  background-color: #f5f5f5;
  // height:500px;
}
</style>
